<template>
  <div>
    <el-button @click="visible = true">打开抽屉</el-button>
    <!-- 可以使用所以 el-drawer 的属性 -->
    <ComDrawer
      :visible.sync="visible"
      v-bind="option"
      @on-submit="onSubmit"
      @on-close="onClose"
    >
      <div v-for="item in 100" :key="item">这里编辑内容{{ item }}</div>
      <!-- 可以自定义底部 footer -->
      <!-- <template slot="footer"></template> -->
    </ComDrawer>
  </div>
</template>

<script>
import ComDrawer from "./components/com-drawer.vue";
export default {
  components: {
    ComDrawer,
  },
  data() {
    return {
      visible: false,
      option: {
        title: "编辑",
        //  ltr:从左往右开 rtl:从右往左开 ttb:从上往下开 btt:从下往上开
        direction: "rtl",
        size: "45%",
      },
    };
  },
  methods: {
    // 弹窗点击提交 done:停止加载动画并关闭弹窗 loading:停止加载动画
    onSubmit(done, loading) {
      setTimeout(() => {
        this.$message({
          type: "success",
          message: "提交成功",
        });
        done();
        // loading();
      }, 2000);
    },
    onClose() {
      console.log("关闭");
    },
  },
};
</script>